<!-- 提现记录 -->
<template>
    <div class='page-main'>
        <CustomForm :formInline="form" @onSubmit="onSubmit" @resetTable="resetTable" :exportBtn="false">
            <el-form-item label="审核状态">
                <el-select v-model="form.status" placeholder="选择审核状态" @change="changeStatusSelect" clearable>
                    <el-option label="全部" :value="0"></el-option>
                    <el-option label="待审核" :value="1"></el-option>
                    <el-option label="审核通过" :value="2"></el-option>
                    <el-option label="审核失败" :value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="银行卡号">
                <el-input v-model="form.bank_number" placeholder="请输入银行卡号" clearable></el-input>
            </el-form-item>
            <el-form-item label="银行户名">
                <el-input v-model="form.person_name" placeholder="请输入银行户名" clearable></el-input>
            </el-form-item>
            <el-form-item label="申请时间">
                <el-date-picker v-model="pickerData" type="daterange" @change="pickerChange" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                </el-date-picker>
            </el-form-item>
        </CustomForm>

        <el-table :data="list" style="width: 100%" height="700" v-loading="tableloading" border ref="multipleTable">
            <el-table-column prop="id" label="ID" width="110" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="user_name" label="申请人" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                        {{ $maskString(scope.row.user_name) }}
                </template>
            </el-table-column>
            <el-table-column prop="bank_name" label="银行" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="person_name" label="银行户名" width="120" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                        {{ scope.row.person_name }}
                </template>
            </el-table-column>
            <el-table-column prop="bank_number" label="银行卡号" width="180" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                        {{ scope.row.bank_number }}
                </template>
            </el-table-column>
            <el-table-column prop="account" label="子账号" align="center" width="200" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                        {{ scope.row.account }}
                </template>
            </el-table-column>
            <el-table-column prop="add_time" label="申请时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="fina_time" label="结算时间" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="money" label="申请金额(元)" align="center" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div v-if="scope.row.status === 0">
                        <el-button class="btn" type="success" size="mini"
                            @click="access(1, scope.row.id)">通过</el-button>
                        <el-button class="btn" type="danger" size="mini" @click="access(2, scope.row.id)">拒绝</el-button>
                    </div>
                    <p v-else-if="scope.row.status === 1" style="color:green">通过</p>
                    <p v-else-if="scope.row.status === 2" style="color:red">拒绝</p>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="form.page" :page-sizes="[10, 20, 30, 50, 75, 100]" :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { fleetApprove, fleetWithdrawalList } from '@/api/moneyManagment'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
        //这里存放数据
        return {
            form: {
                bank_number: "",
                status: 0,//0全部1待审核2审核通过3审核失败
                person_name: "",
                time: "",
                page: 1,
                pageSize: 10
            },
            tableloading: false,
            total: 0,
            list: [],
            pickerData: [],
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        pickerChange(val) {
            if (val.length) {
                this.form.time = val.join(' - ');
            } else {
                this.form.time = "";
            }
        },
        async fleetWithdrawalList() {
            this.tableloading = true;
            let res = await fleetWithdrawalList(this.form);
            this.tableloading = false;
            if (res.code === 200) {
                this.list = res.data.data ? res.data.data : [];
                this.total = res.data.total ? res.data.total : 0;
            }
        },
        onSubmit() {
            this.fleetWithdrawalList();
        },
        resetTable() {
            this.form = {
                bank_number: "",
                status: 0,//0全部1待审核2审核通过3审核失败
                person_name: "",
                time: "",
                page: 1,
                pageSize: 10
            };
            this.pickerData = [];
            this.fleetWithdrawalList();
        },
        changeStatusSelect(value) {
            this.form.status = value;
            this.fleetWithdrawalList();
        },
        handleSizeChange(pageSize) {
            this.form.pageSize = pageSize
            this.form.page = 1;
            this.fleetWithdrawalList();
        },
        handleCurrentChange(page) {
            this.form.page = page;
            this.fleetWithdrawalList();
        },
        access(status, id) {
            //通过
            if (status === 1) {
                this.$confirm('确定通过该提现记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await fleetApprove({
                        id,
                        status
                    });
                    if (res.code === 200) {
                        this.$message.success('通过成功');
                    } else {
                        this.$message.error(res.msg)
                    }
                    this.fleetWithdrawalList();
                }).catch(() => {
                    this.$message.info('取消!')
                });
            } else {
                //拒绝
                this.$confirm('确定拒绝该提现记录吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let res = await fleetApprove({
                        id,
                        status
                    });
                    if (res.code === 200) {
                        this.$message.success('拒绝成功');
                    } else {
                        this.$message.error(res.msg)
                    }
                    this.fleetWithdrawalList();
                }).catch(() => {
                    this.$message.info('取消!')
                });
            }
        }
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        this.fleetWithdrawalList();
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

::v-deep .el-pagination {
    margin-top: 20px;
}
</style>